• ;
  • A Coding Boy
  • Blog
  • Videos
  • Projects
  • Home
HTML AND CSS
LOGIN PAGE
WEBSITE DESGIN
API PROJECTS
CARD DESGIN
JAVASCRIPTS GAMES
JAVASCRIPT PROJECTS
JAVA PROJECTS
PYTHON PROJECTS
demo post
only for demo nasa prospect
only for demo the gonnies
most popular
how to create parallax website
how to create a beautiful card
how to create a netflix login page
how to create flipping ui card
how to create image generator website
Word Guessing Game in HTML CSS & JavaScript
The word guessing game is a task that which the player has to find all letters of a random word in the given tries. The game will also give you hints to make your guess easy.
My word guessing game is the same as I said above. You can also see it in the preview image. If you want to see a demo of how this game works or how I created it using HTML CSS & JavaScript, you can watch the given YouTube video.
Word Guessing Game in JavaScript [Source Codes]
To create this Word Guessing Game in JavaScript. First, you need to create four Files: HTML, CSS & JavaScript Files. After creating these files just paste the given codes into your file. You can also download the source code files of this Word Guessing from the below download button.
First, paste the following codes into your index.html file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Word Guessing Game JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<h1>Guess the Word</h1>
<div class="content">
<input type="text" class="typing-input" maxlength="1">
<div class="inputs"></div>
<div class="details">
<p class="hint">Hint: <span></span></p>
<p class="guess-left">Remaining guesses: <span></span></p>
<p class="wrong-letter">Wrong letters: <span></span></p>
</div>
<button class="reset-btn">Reset Game</button>
</div>
</div>
<script src="js/words.js"></script>
<script src="js/script.js"></script>
</body>
</html>
<!DOCTYPE html> <!-- Coding By CodingNepal - youtube.com/codingnepal --> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Word Guessing Game JavaScript | CodingNepal</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="wrapper"> <h1>Guess the Word</h1> <div class="content"> <input type="text" class="typing-input" maxlength="1"> <div class="inputs"></div> <div class="details"> <p class="hint">Hint: <span></span></p> <p class="guess-left">Remaining guesses: <span></span></p> <p class="wrong-letter">Wrong letters: <span></span></p> </div> <button class="reset-btn">Reset Game</button> </div> </div> <script src="js/words.js"></script> <script src="js/script.js"></script> </body> </html>
Second, paste the following codes into your style.css file
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
padding: 0 10px;
min-height: 100vh;
align-items: center;
justify-content: center;
background: #1BB295;
}
.wrapper{
width: 430px;
background: #fff;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.wrapper h1{
font-size: 25px;
font-weight: 500;
padding: 20px 25px;
border-bottom: 1px solid #ccc;
}
.wrapper .content{
margin: 25px 25px 35px;
}
.content .inputs{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.inputs input{
height: 57px;
width: 56px;
margin: 4px;
font-size: 24px;
font-weight: 500;
color: #1ba98c;
text-align: center;
border-radius: 5px;
background: none;
pointer-events: none;
text-transform: uppercase;
border: 1px solid #B5B5B5;
}
.typing-input {
opacity: 0;
z-index: -999;
position: absolute;
pointer-events: none;
}
.inputs input:first-child{
margin-left: 0px;
}
.content .details{
margin: 20px 0 25px;
}
.details p{
font-size: 19px;
margin-bottom: 10px;
}
.content .reset-btn{
width: 100%;
border: none;
cursor: pointer;
color: #fff;
outline: none;
padding: 15px 0;
font-size: 17px;
border-radius: 5px;
background: #1BB295;
transition: all 0.3s ease;
}
.content .reset-btn:hover{
background: #18a589;
}
@media screen and (max-width: 460px) {
.wrapper {
width: 100%;
}
.wrapper h1{
font-size: 22px;
padding: 16px 20px;
}
.wrapper .content{
margin: 25px 20px 35px;
}
.inputs input{
height: 51px;
width: 50px;
margin: 3px;
font-size: 22px;
}
.details p{
font-size: 17px;
}
.content .reset-btn{
padding: 14px 0;
font-size: 16px;
}
}
/* Import Google font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ display: flex; padding: 0 10px; min-height: 100vh; align-items: center; justify-content: center; background: #1BB295; } .wrapper{ width: 430px; background: #fff; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); } .wrapper h1{ font-size: 25px; font-weight: 500; padding: 20px 25px; border-bottom: 1px solid #ccc; } .wrapper .content{ margin: 25px 25px 35px; } .content .inputs{ display: flex; flex-wrap: wrap; justify-content: center; } .inputs input{ height: 57px; width: 56px; margin: 4px; font-size: 24px; font-weight: 500; color: #1ba98c; text-align: center; border-radius: 5px; background: none; pointer-events: none; text-transform: uppercase; border: 1px solid #B5B5B5; } .typing-input { opacity: 0; z-index: -999; position: absolute; pointer-events: none; } .inputs input:first-child{ margin-left: 0px; } .content .details{ margin: 20px 0 25px; } .details p{ font-size: 19px; margin-bottom: 10px; } .content .reset-btn{ width: 100%; border: none; cursor: pointer; color: #fff; outline: none; padding: 15px 0; font-size: 17px; border-radius: 5px; background: #1BB295; transition: all 0.3s ease; } .content .reset-btn:hover{ background: #18a589; } @media screen and (max-width: 460px) { .wrapper { width: 100%; } .wrapper h1{ font-size: 22px; padding: 16px 20px; } .wrapper .content{ margin: 25px 20px 35px; } .inputs input{ height: 51px; width: 50px; margin: 3px; font-size: 22px; } .details p{ font-size: 17px; } .content .reset-btn{ padding: 14px 0; font-size: 16px; } }
Last, paste the following codes into your script.js file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
const wordList = [
{
word: "python",
hint: "programming language"
},
{
word: "guitar",
hint: "a musical instrument"
},
{
word: "aim",
hint: "a purpose or intention"
},
{
word: "venus",
hint: "planet of our solar system"
},
{
word: "gold",
hint: "a yellow precious metal"
},
{
word: "ebay",
hint: "online shopping site"
},
{
word: "golang",
hint: "programming language"
},
{
word: "coding",
hint: "related to programming"
},
{
word: "matrix",
hint: "science fiction movie"
},
{
word: "bugs",
hint: "related to programming"
},
{
word: "avatar",
hint: "epic science fiction film"
},
{
word: "gif",
hint: "a file format for image"
},
{
word: "mental",
hint: "related to the mind"
},
{
word: "map",
hint: "diagram represent of an area"
},
{
word: "island",
hint: "land surrounded by water"
},
{
word: "hockey",
hint: "a famous outdoor game"
},
{
word: "chess",
hint: "related to an indoor game"
},
{
word: "viber",
hint: "a social media app"
},
{
word: "github",
hint: "code hosting platform"
},
{
word: "png",
hint: "a image file format"
},
{
word: "silver",
hint: "precious greyish-white metal"
},
{
word: "mobile",
hint: "an electronic device"
},
{
word: "gpu",
hint: "computer component"
},
{
word: "java",
hint: "programming language"
},
{
word: "google",
hint: "famous search engine"
},
{
word: "venice",
hint: "famous city of waters"
},
{
word: "excel",
hint: "microsoft product for windows"
},
{
word: "mysql",
hint: "a relational database system"
},
{
word: "nepal",
hint: "developing country name"
},
{
word: "flute",
hint: "a musical instrument"
},
{
word: "crypto",
hint: "related to cryptocurrency"
},
{
word: "tesla",
hint: "unit of magnetic flux density"
},
{
word: "mars",
hint: "planet of our solar system"
},
{
word: "proxy",
hint: "related to server application"
},
{
word: "email",
hint: "related to exchanging message"
},
{
word: "html",
hint: "markup language for the web"
},
{
word: "air",
hint: "related to a gas"
},
{
word: "idea",
hint: "a thought or suggestion"
},
{
word: "server",
hint: "related to computer or system"
},
{
word: "svg",
hint: "a vector image format"
},
{
word: "jpeg",
hint: "a image file format"
},
{
word: "search",
hint: "act to find something"
},
{
word: "key",
hint: "small piece of metal"
},
{
word: "egypt",
hint: "a country name"
},
{
word: "joker",
hint: "psychological thriller film"
},
{
word: "dubai",
hint: "developed country name"
},
{
word: "photo",
hint: "representation of person or scene"
},
{
word: "nile",
hint: "largest river in the world"
},
{
word: "rain",
hint: "related to a water"
},
]
const wordList = [ { word: "python", hint: "programming language" }, { word: "guitar", hint: "a musical instrument" }, { word: "aim", hint: "a purpose or intention" }, { word: "venus", hint: "planet of our solar system" }, { word: "gold", hint: "a yellow precious metal" }, { word: "ebay", hint: "online shopping site" }, { word: "golang", hint: "programming language" }, { word: "coding", hint: "related to programming" }, { word: "matrix", hint: "science fiction movie" }, { word: "bugs", hint: "related to programming" }, { word: "avatar", hint: "epic science fiction film" }, { word: "gif", hint: "a file format for image" }, { word: "mental", hint: "related to the mind" }, { word: "map", hint: "diagram represent of an area" }, { word: "island", hint: "land surrounded by water" }, { word: "hockey", hint: "a famous outdoor game" }, { word: "chess", hint: "related to an indoor game" }, { word: "viber", hint: "a social media app" }, { word: "github", hint: "code hosting platform" }, { word: "png", hint: "a image file format" }, { word: "silver", hint: "precious greyish-white metal" }, { word: "mobile", hint: "an electronic device" }, { word: "gpu", hint: "computer component" }, { word: "java", hint: "programming language" }, { word: "google", hint: "famous search engine" }, { word: "venice", hint: "famous city of waters" }, { word: "excel", hint: "microsoft product for windows" }, { word: "mysql", hint: "a relational database system" }, { word: "nepal", hint: "developing country name" }, { word: "flute", hint: "a musical instrument" }, { word: "crypto", hint: "related to cryptocurrency" }, { word: "tesla", hint: "unit of magnetic flux density" }, { word: "mars", hint: "planet of our solar system" }, { word: "proxy", hint: "related to server application" }, { word: "email", hint: "related to exchanging message" }, { word: "html", hint: "markup language for the web" }, { word: "air", hint: "related to a gas" }, { word: "idea", hint: "a thought or suggestion" }, { word: "server", hint: "related to computer or system" }, { word: "svg", hint: "a vector image format" }, { word: "jpeg", hint: "a image file format" }, { word: "search", hint: "act to find something" }, { word: "key", hint: "small piece of metal" }, { word: "egypt", hint: "a country name" }, { word: "joker", hint: "psychological thriller film" }, { word: "dubai", hint: "developed country name" }, { word: "photo", hint: "representation of person or scene" }, { word: "nile", hint: "largest river in the world" }, { word: "rain", hint: "related to a water" }, ]
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
const inputs = document.querySelector(".inputs"),
hintTag = document.querySelector(".hint span"),
guessLeft = document.querySelector(".guess-left span"),
wrongLetter = document.querySelector(".wrong-letter span"),
resetBtn = document.querySelector(".reset-btn"),
typingInput = document.querySelector(".typing-input");
let word, maxGuesses, incorrectLetters = [], correctLetters = [];
function randomWord() {
let ranItem = wordList[Math.floor(Math.random() * wordList.length)];
word = ranItem.word;
maxGuesses = word.length >= 5 ? 8 : 6;
correctLetters = []; incorrectLetters = [];
hintTag.innerText = ranItem.hint;
guessLeft.innerText = maxGuesses;
wrongLetter.innerText = incorrectLetters;
let html = "";
for (let i = 0; i < word.length; i++) {
html += `<input type="text" disabled>`;
inputs.innerHTML = html;
}
}
randomWord();
function initGame(e) {
let key = e.target.value.toLowerCase();
if(key.match(/^[A-Za-z]+$/) && !incorrectLetters.includes(` ${key}`) && !correctLetters.includes(key)) {
if(word.includes(key)) {
for (let i = 0; i < word.length; i++) {
if(word[i] == key) {
correctLetters += key;
inputs.querySelectorAll("input")[i].value = key;
}
}
} else {
maxGuesses--;
incorrectLetters.push(` ${key}`);
}
guessLeft.innerText = maxGuesses;
wrongLetter.innerText = incorrectLetters;
}
typingInput.value = "";
setTimeout(() => {
if(correctLetters.length === word.length) {
alert(`Congrats! You found the word ${word.toUpperCase()}`);
return randomWord();
} else if(maxGuesses < 1) {
alert("Game over! You don't have remaining guesses");
for(let i = 0; i < word.length; i++) {
inputs.querySelectorAll("input")[i].value = word[i];
}
}
}, 100);
}
resetBtn.addEventListener("click", randomWord);
typingInput.addEventListener("input", initGame);
inputs.addEventListener("click", () => typingInput.focus());
document.addEventListener("keydown", () => typingInput.focus());
const inputs = document.querySelector(".inputs"), hintTag = document.querySelector(".hint span"), guessLeft = document.querySelector(".guess-left span"), wrongLetter = document.querySelector(".wrong-letter span"), resetBtn = document.querySelector(".reset-btn"), typingInput = document.querySelector(".typing-input"); let word, maxGuesses, incorrectLetters = [], correctLetters = []; function randomWord() { let ranItem = wordList[Math.floor(Math.random() * wordList.length)]; word = ranItem.word; maxGuesses = word.length >= 5 ? 8 : 6; correctLetters = []; incorrectLetters = []; hintTag.innerText = ranItem.hint; guessLeft.innerText = maxGuesses; wrongLetter.innerText = incorrectLetters; let html = ""; for (let i = 0; i < word.length; i++) { html += `<input type="text" disabled>`; inputs.innerHTML = html; } } randomWord(); function initGame(e) { let key = e.target.value.toLowerCase(); if(key.match(/^[A-Za-z]+$/) && !incorrectLetters.includes(` ${key}`) && !correctLetters.includes(key)) { if(word.includes(key)) { for (let i = 0; i < word.length; i++) { if(word[i] == key) { correctLetters += key; inputs.querySelectorAll("input")[i].value = key; } } } else { maxGuesses--; incorrectLetters.push(` ${key}`); } guessLeft.innerText = maxGuesses; wrongLetter.innerText = incorrectLetters; } typingInput.value = ""; setTimeout(() => { if(correctLetters.length === word.length) { alert(`Congrats! You found the word ${word.toUpperCase()}`); return randomWord(); } else if(maxGuesses < 1) { alert("Game over! You don't have remaining guesses"); for(let i = 0; i < word.length; i++) { inputs.querySelectorAll("input")[i].value = word[i]; } } }, 100); } resetBtn.addEventListener("click", randomWord); typingInput.addEventListener("input", initGame); inputs.addEventListener("click", () => typingInput.focus()); document.addEventListener("keydown", () => typingInput.focus());
That’s all, now you’ve successfully built a Word Guessing Game in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
live demo
Download files
Info
Home
Projects
Blogs
Videos
About us
Follow us for more!
© 2023 All Rights Reserved A Coding Boy

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000; background-position: center; background-size: cover; } .wrapper { width: 400px; border-radius: 8px; padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } form { display: flex; flex-direction: column; } h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .input-field { position: relative; border-bottom: 2px solid #ccc; margin: 15px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #fff; font-size: 16px; pointer-events: none; transition: 0.15s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #fff; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.8rem; top: 10px; transform: translateY(-120%); } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #fff; } #remember { accent-color: #fff; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #efefef; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background: #fff; color: #000; font-weight: 600; border: none; padding: 12px 20px; cursor: pointer; border-radius: 3px; font-size: 16px; border: 2px solid transparent; transition: 0.3s ease; } button:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); } .register { text-align: center; margin-top: 30px; color: #fff;}